import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, Modal, message, Select, Radio, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { formItemLayout } from '@/utils/utils'
import {
  fetchInvProject,
  invProjectSearch,
} from '@/services/setting/inv'

const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))
const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    key: 'sort',
    render: t => <>{t + 1}</>
  },
  {
    title: "配送公司",
    dataIndex: 'cityDeliveryName',
    key: "cityDeliveryName",
  },
  {
    title: "创建时间",
    dataIndex: 'createTime',
    key: "createTime",
  },
]

const Project = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState([])
  const [visible, setVisible] = useState(false)
  const [projectName, setProjectName] = useState([])
  const [proVal, setProVal] = useState(null)

  useEffect(() => {
    init()
  }, [])

  const init = async params => {
    const res = await fetchInvProject(params)
    res.code == 0 ? setData(res.data) : message.info(res.msg) 
  }

  const searchGoodsName = () => {
    useEffect(() => {
      val => setProVal(val)
    }, [])
  }

  const searchProject = async params => {
    if (proVal) {
      const res = await invProjectSearch({
        name: proVal
      })
      setProjectName(res.data)
    }
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    switch (type) {
      case 1:
        return setVisible(!visible)    
      default:
        break;
    }
  }
  const handleAdd = e => {

  }
  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table 
        columns={columns}
      />
      <Modal
        visible={visible}
        onOk={handleAdd}
        onCancel={() => setVisible(!visible)}
        title='新增'
        destroyOnClose
      >
        <Form {...formItemLayout}>
          <Form.Item label='项目名称查询'>
            {getFieldDecorator('goodsName', {
            })(<Select
                onChange={searchGoodsName}
                onSearch={searchProject}    
                showSearch          
              >
              
            </Select>)}
          </Form.Item>
          <Form.Item label='项目名'>
            {getFieldDecorator('goodsName', {
              rules: [
                {
                  required: true,
                }
              ]
            })(<Input />)}
          </Form.Item>
          <Form.Item label='税分类编码'>
            {getFieldDecorator('goodsName', {
              rules: [
                {
                  required: true,
                }
              ]
            })(<Input />)}
          </Form.Item>
          <Form.Item label='税率'>
            {getFieldDecorator('goodsName', {
              rules: [
                {
                  required: true,
                }
              ]
            })(<Input addonAfter={'%'} />)}
          </Form.Item>
          <Form.Item label='是否成品油'>
            {getFieldDecorator('goodsName', {
              rules: [
                {
                  required: true,
                  message: '请填写商品名称'
                }
              ]
            })(<Radio.Group>
                <Radio value={0}>是</Radio>
                <Radio value={1}>否</Radio>
            </Radio.Group>)}
          </Form.Item>
          <Form.Item label='商品名称'>
            {getFieldDecorator('goodsName', {
              rules: [
                {
                  required: true,
                }
              ]
            })(<Input />)}
          </Form.Item>
        </Form>
      </Modal>
    </PageHeaderWrapper>
    )
}

export default Form.create()(Project)
